<template>
	<nt-container bg-color="#F2F4F6">
		<view class="nt-message">
			<view class="nt-message__item" @tap="toPage(it)" v-for="(it,idx) in messageGroup" :key="idx">
				<image class="nt-message__item--icon" :src="it.icon"></image>
				<view class="nt-message__item--content">
					<view class="nt-message__item--content__title">
						{{ it.modelx_text }}
						<view class="nt-message__item--content__time">{{ it.create_date }}</view>
					</view>
					<view class="nt-message__item--content__desc">{{it.title}}</view>
				</view>
			</view>
		</view>
	</nt-container>
</template>

<script>
	import {
		getMessagesModelxList
	} from "@/api"
	export default {
		data() {
			return {
				messageGroup: []
			}
		},
		onLoad() {
			this.getMessageList()
		},
		methods: {
			getMessageList() {
				getMessagesModelxList().then(res => {
					if (res.code === 1) {
						this.messageGroup = res.data.map(item => {
							if (item.modelx === null) {
								item.icon = "/static/image/sys-message.png"
							} else if (item.modelx === "notice") {
								item.icon = "/static/image/notice-message.png"
							} else if (item.modelx === "order") {
								item.icon = "/static/image/order-message.png"
							} else {
								item.icon = "/static/image/diaochai-message.png"
							}
							return item;
						})
					}
				})
			},
			toPage(it) {
				this.nav(`/subpackage/member/pages/message/notice?type=${it.modelx || ""}`)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.nt-message {
		padding: 25rpx;

		&__item {
			display: flex;
			align-items: center;
			justify-content: center;
			background: #fff;
			padding: 25rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;

			&--icon {
				width: 90rpx;
				height: 90rpx;
			}

			&--content {
				flex: 1;
				padding-left: 30rpx;

				&__title {
					font-size: 30rpx;
					color: #333;
					font-weight: bold;
					position: relative;

				}

				&__time {
					position: absolute;
					right: 0;
					top: 0;
					font-size: 20rpx;
					color: #666;
					font-weight: normal;
				}

				&__desc {
					font-size: 20rpx;
					color: #999;
					margin-top: 10rpx;
				}

			}
		}
	}
</style>